<template>
  <div class="app-container">
    <el-form :model="queryForm" ref="queryFormRef" :inline="true">
      <el-form-item prop="jobName" label="任务名称">
        <el-input v-model="queryForm.jobName" placeholder="请输入任务名称" @press-enter="handleQuery" />
      </el-form-item>
      <el-form-item prop="jobGroup" label="任务分组">
        <el-select v-model="queryForm.jobGroup" placeholder="请选择任务分组">
          <el-option value="DEFAULT">默认</el-option>
          <el-option value="SYSTEM">系统</el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="status" label="状态">
        <el-select v-model="queryForm.status" placeholder="请选择任务状态">
          <el-option :value="2">正常</el-option>
          <el-option :value="1">关闭</el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-space>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleResetQuery">重置</el-button>
        </el-space>
      </el-form-item>
    </el-form>

    <el-divider />

    <div class="table-action">
      <el-button type="primary" @click="handleAdd">新增定时任务</el-button>
    </div>

    <!-- <el-table :data="tableData" :columns="columns"  :pagination="{ 'show-total': true, 'show-jumper': true, 'show-page-size': true, total: pager.count, current: currentPage }">
      <template #status="{ record }">
        <el-tag v-if="record.status == 2" type="success">正常</el-tag>
        <el-tag v-if="record.status == 1" type="danger">停用</el-tag>
      </template>
      <template #action="{ record }">
        <el-button text type="primary" @click="handleUpdate(record)">修改</el-button>
        <el-button text type="primary" status="success" v-if="record.entry_id == 0" @click="handleStart(record.jobId)">启动</el-button>
        <el-button text type="primary" status="danger" v-if="record.entry_id !== 0" @click="handleStop(record.jobId)">停止</el-button>
        <el-button text type="primary" status="danger" @click="() => { deleteVisible = true; deleteData = [record.jobId];  }">删除</el-button>
      </template>
    </el-table> -->

    <el-table :data="tableData" row-key="jobId">
      <el-table-column label='编号' prop='jobId'></el-table-column>
      <el-table-column label='任务名称' prop='jobName'></el-table-column>
      <el-table-column label='任务分组' prop='jobGroup'></el-table-column>
      <el-table-column label='任务表达式' prop='cronExpression'></el-table-column>
      <el-table-column label='调用目标' prop='invokeTarget'></el-table-column>
      <el-table-column label='状态' prop='status'>
        <template #default="scope">
          <el-tag v-if="scope.row.status == 2" type="success">正常</el-tag>
          <el-tag v-if="scope.row.status == 1" type="danger">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label='操作' prop='action'>
        <template #default="scope">
          <el-button text type="primary" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button text type="primary" status="success" v-if="scope.row.entry_id == 0" @click="handleStart(scope.row.jobId)">启动</el-button>
          <el-button text type="primary" status="danger" v-if="scope.row.entry_id !== 0" @click="handleStop(scope.row.jobId)">停止</el-button>
          <el-button text type="primary" status="danger" @click="() => { deleteVisible = true; deleteData = [scope.row.jobId];  }">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="modalVisible" title-align="start" :title="modalTitle" :on-before-ok="onBeforeOk"
      @ok="handleOk" @cancel="modalFormRef.resetFields()">
      <el-form :model="modalForm" :rules="rules" ref="modalFormRef" auto-label-width>
        <el-form-item prop="jobName" label="任务名称">
          <el-input v-model="modalForm.jobName" placeholder="请输入任务名称"></el-input>
        </el-form-item>
        <el-form-item prop="jobGroup" label="任务分组">
          <el-select v-model="modalForm.jobGroup" placeholder="请选择任务分组">
            <el-option value="DEFAULT">默认</el-option>
            <el-option value="SYSTEM">系统</el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="invokeTarget" label="调用目标">
          <el-input v-model="modalForm.invokeTarget" placeholder="调用目标"></el-input>
        </el-form-item>
        <el-form-item prop="args" label="目标参数">
          <el-input v-model="modalForm.args" placeholder="目标参iuu数"></el-input>
        </el-form-item>
        <el-form-item prop="cronExpression" label="Cron表达式">
          <el-input v-model="modalForm.cronExpression" placeholder="Cron表达式"></el-input>
        </el-form-item>
        <el-form-item prop="concurrent" label="是否并发">
          <el-radio-group v-model="modalForm.concurrent" type="button">
            <el-radio :label="0">允许</el-radio>
            <el-radio :label="1">禁止</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="jobType" label="调用类型">
          <el-radio-group v-model="modalForm.jobType" type="button">
            <el-radio :label="1">接口</el-radio>
            <el-radio :label="2">函数</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="misfirePolicy" label="执行策略">
          <el-radio-group v-model="modalForm.misfirePolicy" type="button">
            <el-radio :label="1">立即执行</el-radio>
            <el-radio :label="2">执行一次</el-radio>
            <el-radio :label="3">放弃执行</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="status" label="状态">
          <el-select v-model="modalForm.status">
            <el-option :value="2">正常</el-option>
            <el-option :value="1">停用</el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- Akiraka 20230223 删除与批量删除 开始 -->
    <!-- <DeleteModal :data="deleteData" :visible="deleteVisible" :apiDelete="delSysJob"
      @deleteVisibleChange="() => deleteVisible = false" /> -->
    <!-- Akiraka 20230223 删除与批量删除 结束 -->
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, getCurrentInstance, watch } from 'vue';
import { listSysJob, addSysJob, updateSysJob, delSysJob, startJob, removeJob } from '@/api/sys-job';

// Akiraka 20230210 删除数据
const deleteData = ref([])
// Akiraka 20230210 删除对话框
const deleteVisible = ref(false)

const modalFormRef = ref({});

// Akiraka 20230210 监听删除事件
watch(() => deleteVisible.value ,(value) => {
  if ( value == false ) {
    getSysJobListInfo(queryForm);
  }
})

const { proxy } = getCurrentInstance();

const currentPage = ref(1);
// Pager
const pager = {
  count: 0,
  pageIndex: 1,
  pageSize: 10,
};

const queryForm = reactive({});
const modalForm = reactive({
  concurrent: 1,
  jobType: 1,
  misfirePolicy: 1,
  status: 2,
});

// 表单检验规则
const rules = {
  jobName: [{ required: true, message: '请输入任务名称' }],
  jobGroup: [{ required: true, message: '请选择任务分组' }],
  invokeTarget: [{ required: true, message: '请输入调用目标' }],
  cronExpression: [{ required: true, message: '请输入Cron表达式' }],
  status: [{ required: true, message: '请选择状态' }],
};

const modalVisible = ref(false);
const modalTitle = ref('默认标题');

const tableData = ref([]);
const queryFormRef = ref({});
// 查询任务
const handleQuery = () => {
  getSysJobListInfo(queryForm);
}

// 重置查询
const handleResetQuery = () => {
queryFormRef.value.resetFields();

  getSysJobListInfo();
}

// 新增任务
const handleAdd = () => {
  modalVisible.value = true;
  modalTitle.value = '新增任务';
};

// 修改任务
const handleUpdate = (record) => {
  modalVisible.value = true;
  modalTitle.value = '修改任务';

  Object.assign(modalForm, record);
};

// 启动定时任务
const handleStart = async (jobId) => {
  await startJob(jobId);
  proxy.$message.success('启动任务成功！')

  getSysJobListInfo();
}

// 关闭定时任务
const handleStop = async (jobId) => {
  await removeJob(jobId);
  proxy.$message.success('已停止任务！')

  getSysJobListInfo();
}

// Modal 触发oK事件前
const onBeforeOk = (done) => {
  modalFormRef.value.validate((err) => {
    if (!err) {
      return done();
    } else {
      proxy.$message.error('表单校验失败');
      return done(false);
    }
  });
};

// Modal 触发ok事件
const handleOk = async () => {
  if (modalForm.jobId) {
    const { code, msg } = await updateSysJob(modalForm);
    if (code == 200 ) {
      proxy.$message.success('修改成功');
    } else {
      proxy.$message.error(msg);
    }
  } else {
    const { code, msg } = await addSysJob(modalForm);
    if (code == 200 ) {
      proxy.$message.success('新增成功');
    } else {
      proxy.$message.error(msg);
    }
  }
  getSysJobListInfo();
};

// 获取系统任务信息
const getSysJobListInfo = async (params = {}) => {
  const { data, code, msg } = await listSysJob(params);
  if ( code == 200 ) {
    tableData.value = data.list;
    Object.assign(pager, { count: data.count, pageIndex: data.pageIndex, pageSize: data.pageSize });
  } else {
    proxy.$message.error(msg);
  }
};


onMounted(() => {
  getSysJobListInfo();
});
</script>

<style lang="scss" scoped>
.table-action {
  margin-bottom: 12px;
}
</style>
